import QtQuick 2.0
import QtQuick.Extras 1.4
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
Rectangle {
    id: calendar
    property int tWidth: 128
    property int tHeight: 30
    Layout.preferredHeight:200
    color:"#383838"
    property alias tumbler: year_tumbler

    property int curyear
    property int curmonth
    property int curday
    property int hour
    property int minutes
    property date currentDate: new Date()

    property var selected_year
    property var selected_month
    property var selected_day
    //time format
    property string curTimeFormat: "24H"  //12H

    //anchors.fill: parent;

    Component.onCompleted: {
        updateDate();//load DateTime
    }
    function get_selected_day() {

        var day =  ""+selected_year+"-"+ (selected_month<10 ?"0": "") +
                selected_month+"-" + (selected_day<10 ?"0": "") +
                selected_day
        //console.log(day);
        return day;
    }
    function updateDate(){
        var date_tring = currentDate.toLocaleDateString();
        curyear = parseInt(currentDate.getFullYear().toString());
        curmonth = parseInt((currentDate.getMonth()+1).toString())
        curday = parseInt(currentDate.getDate().toString())
        selected_day = curday
        selected_month = curmonth
        selected_year = curday
    }

    Component{
        id: tumbler_style

        TumblerStyle{
            visibleItemCount: 5
            id: style
            delegate: Item{
                //implicitHeight: (year_tumbler.height - padding.top - padding.bottom) / style.visibleItemCount
                  opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6

                height: calendar.tHeight
                Text {
                    id: label
                    text: styleData.value
                    font.pixelSize: 32
                    color: styleData.current ? "#F5F3F1" : "#676666"

                    scale:styleData.current ? 1:0.9
                    anchors.centerIn: parent
                }
            }
            property Component frame: Item {}
            property Component background: Item {}
            property Component separator: Item {}
            property Component foreground: Item {}
        }
    }

    //Text {y:40; x:60; text: qsTr("年");font.pixelSize: 30;color: "#C4BFBD"}
    //Text {y:40; x:120; text: qsTr("月");font.pixelSize: 30;color: "#C4BFBD"}
    //Text {y:40; x:180; text: qsTr("日");font.pixelSize: 30;color: "#C4BFBD"}


        Tumbler {
            id: year_tumbler
            style: tumbler_style
            width: calendar.tWidth;
            height: parent.height
            anchors.right: monthTumbler.left
            TumblerColumn {
                id: tumblerYearColum
                width: calendar.tWidth
                model: {
                    var array = [];
                    for (var i = 2000; i < 2100; ++i) {
                        array.push(i.toString()+"年" );
                    }
                    model = array;
                }

                onCurrentIndexChanged: {
                    //    当前如果为2月  可能需要更新2月份天数    下标为1
                    if(tumblerMonthColum.currentIndex === 1)
                    {
                        tumblerDayColumn.updateModel()
                    }
                    selected_year = currentIndex+2000
                    //console.log("height: " +  tumblerYearColum.height)
                }
            }
            Component.onCompleted: {
                year_tumbler.setCurrentIndexAt(0,curyear-2000);

            }
        }

        //month
        Tumbler {
            id: monthTumbler
            width: calendar.tWidth;

            height: parent.height
            anchors.horizontalCenter: parent.horizontalCenter
            style: tumbler_style

            TumblerColumn {
                id: tumblerMonthColum
                width: calendar.tWidth
                model:  {
                    var array = [];
                    for (var i = 1; i <= 12; ++i) {
                        if(i.toString().length===1){
                            array.push("0"+i.toString()+"月" );
                        }
                        else{
                            array.push(i.toString()+"月"  );
                        }
                    }
                    model = array;
                }
                //update dayTumbler
                onCurrentIndexChanged: {
                    selected_month = currentIndex+1
                    tumblerDayColumn.updateModel()
                     get_selected_day()
                }
            }

            Component.onCompleted: {
                monthTumbler.setCurrentIndexAt(0,curmonth-1)

            }
        }

        //day
        Tumbler{
            id: dayTumbler
            width:calendar.tWidth;
            //width: calendar.tWidth;
            height: parent.height
            anchors.left: monthTumbler.right
            style: tumbler_style
            readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
            TumblerColumn {
                id: tumblerDayColumn
                width: calendar.tWidth
                model: 31
                function updateModel() {
                    var previousIndex = tumblerDayColumn.currentIndex;
                    var newDays = dayTumbler.days[tumblerMonthColum.currentIndex]
                    //闰年&2月份 下标+1
                    if((tumblerYearColum.currentIndex%4 == 0) && (tumblerMonthColum.currentIndex == 1)){
                        newDays = dayTumbler.days[tumblerMonthColum.currentIndex]+1
                    }


                    var array = [];
                    for (var i = 0; i < newDays; ++i) {
                        if((i+1).toString().length==1){

                            array.push("0"+(i +1).toString()+"日" );
                        }
                        else{
                            array.push((i +1).toString()+"日" );
                        }

                    }
                    model = array;
                    dayTumbler.setCurrentIndexAt(0, Math.min(newDays - 1, previousIndex));
                }
                onCurrentIndexChanged: {
                    selected_day = currentIndex+1
                }
            }
            Component.onCompleted: {
                dayTumbler.setCurrentIndexAt(0,curday-1)
            }
        }

    //两条线段
    Rectangle{ x:0; y: (tHeight+4)*2; width: parent.width;color: "#474747"; height: 1}
    Rectangle{ x:0; y: (tHeight+4)*3; width: parent.width;color: "#474747";height: 1}
}
